<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@page import="java.io.*" %>
     <%@page import="mavenWebProject.userMapper" %>
     <%@page import="mavenWebProject.user" %>
     <%@page import="mavenWebProject.productsMapper" %>
     <%@page import="mavenWebProject.products" %>
     <%@page import="mavenWebProject.order" %>
     <%@page import="mavenWebProject.car" %>
     <%@page import="java.util.*" %>
     <%@page import="javax.servlet.*" %>
     <%@page import="org.apache.ibatis.io.Resources" %>
     <%@page import="org.apache.ibatis.session.SqlSession"%>
     <%@page import="org.apache.ibatis.session.SqlSessionFactory" %>
     <%@page import="org.apache.ibatis.session.SqlSessionFactoryBuilder" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    body{
        font-family: 楷体;
    }

    div[id="divBackgorund"]{
        position: absolute;
        width:100%;
        height:100%;
        background-color: rgb(255, 255, 255);
    }
    div[id="div0"]{
        position: fixed;
        left:0%;
        top:0%;
        height:40px;
        width:100%;
        background-color: white;
        border: 0.05px solid rgba(0, 0, 0, 0.197);
        z-index: 1;
    }

    a:link{
        color:black;
        text-decoration: none;
    }

    table[id="tableGuide"]{
        position: fixed;
        left:0%;
        top:40px;
        width:200px;
        height:700px;
        background-color: white;
        border:0.5px solid rgb(0,0,0,0.1);
    }

    table[id="tableShowIdentity"]{
        position: absolute;
        left:1310px;
        top:50px;
        width:200px;
        height:300px;
        background-color: white;
        border-radius: 10px;
    }
        td[id="tableGuideTd1"]:hover{
            background-color: rgb(215, 215, 255);
        }td[id="tableGuideTd2"]:hover{
            background-color: rgb(215, 215, 255);
        }td[id="tableGuideTd3"]:hover{
            background-color: rgb(215, 215, 255);
        }td[id="tableGuideTd4"]:hover{
            background-color: rgb(215, 215, 255);
        }td[id="tableGuideTd5"]:hover{
            background-color: rgb(215, 215, 255);
        }
    
    button{
        width:120px;
        height:35px;
        padding:5px;
        border:none;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0);
        font-size:16px;
    }

    table[id="myAccount"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: block;
    }
        p[id="title"]{font-size: 22px;margin:0px;}
        input[type="text"]{border:0.5px solid black;border-radius:10px;background-color:rgb(0,0,0,0);font-size:20px;font-family:楷体;}
        a[id="updateAccount"]{padding:10px;background-color: rgba(70, 154, 207, 0.621);width:80px;font-size: 18px;border-radius:10px;}a[id="cancelUpdate"]{padding:10px;background-color: rgb(70, 154, 207, 0.621);width:80px;font-size: 18px;border-radius:10px;}
   		td{font-size:18px;}
    table[id="updateInfo"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: none;
    }
    	input[type="reset"]{border:none;padding:6px;background-color: rgba(70, 154, 207, 0.621);width:60px;font-size: 16px;border-radius:10px;}a[id="updatePassword"]{padding:10px;background-color: rgba(70, 154, 207, 0.621);width:80px;font-size: 18px;border-radius:10px;}
    table[id="car"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: none;
    }
    	label{font-size:20px;}
    table[id="order"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: none;
    }
    table[id="charge"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: none;
    }
    	a[id="submitMoney"]{padding:10px;background-color: rgba(70, 154, 207, 0.621);width:80px;font-size: 18px;border-radius:10px;}
    table[id="deleteAccount"]{
        position: absolute;
        top:50px;
        left:220px;
        width:1080px;
        height:680px;
        background-color: white;
        border-radius: 10px;
        display: none;
    }

</style>

<body>
	
	<%
	//1.加载mybatis的核心配置文件，获取sqlsessionfactory
	String resource = "mybatis-config.xml";
	InputStream inputStream = Resources.getResourceAsStream(resource);
	SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
	//2.获取sqlsession对象，用它来执行sql
	SqlSession sqlsession=sqlSessionFactory.openSession();
	
	//3.获取mapper接口的代理对象
	userMapper mapper=sqlsession.getMapper(userMapper.class);
	productsMapper productsMapper=sqlsession.getMapper(productsMapper.class);
	
	String username=(String)session.getAttribute("username");
	String password="";String hobby1="";String hobby2="";String hobby3="";
	String tel="";int money=0;String location="";String gender="";String[] temp={};
	List<user> user=mapper.selectByUsername(username);
	for(user s:user){
		username=s.getUsername().trim();password=s.getPassword().trim();tel=s.getTel().trim();money=s.getMoney();location=s.getLocation().trim();gender=s.getGender().trim();
		temp=s.getHobbies().split(" ");
		if(temp.length==1)
			hobby1=temp[0];
		if(temp.length==2){
			hobby1=temp[0];hobby2=temp[1];}
		if(temp.length==3){
			hobby1=temp[0];hobby2=temp[1];hobby3=temp[2];}
	}
	//4.执行方法
	request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");
	
	%>
	
    <div id="divBackgorund"></div>
    <div id="div0">
        <table border="0" height="40px" width="100%">
        <tr>
            <td align="center" valign="top" width="120px"><img src="Imgs/导航栏logo.png" width="100px" height="35px"></td>
            <td width="100px" valign="middle"><font style="size:2;">个人中心</font></td>
            <td width="75%"></td>
            <td><a href="mainScene.jsp" style="font-size:20px;padding:8px;background-color:cyan;border-radius:8px;">首页</a></td>
        </tr>
        </table>
    </div>
    
    <table id="tableGuide" border="0" cellspacing="0">
        <tr><td align="center" height="50px"></td></tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd1"><button id="myAccountButton" onClick="showMyAccount()">我的账户</button></td>
        </tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd2"><button id="updateInfoButton" onClick="showUpdateInfo()">修改密码</button></td>
        </tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd3"><button id="carButton" onClick="showCar()">我的购物车</button></td>
        </tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd4"><button id="orderButton" onClick="showOrder()">我的订单</button></td>
        </tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd5"><button id="chargeButton" onClick="showCharge()">账户充值</button></td>
        </tr>
        <tr>
            <td align="center" height="50px" id="tableGuideTd6"><button id="deleteAccountButton" onClick="showDeleteAccount()">账户注销</button></td>
        </tr>
        <tr><td align="center" valign="top" height="400px"></td></tr>
    </table>

    <table id="tableShowIdentity" border="0">
        <tr><td height="200px" align="center"><img src="Imgs/logo.png" width="200px" height="200px"></td></tr>
        <tr><td height="50px" align="center"><p><font style="font-size:24px;">Hi</font>,<%=username%></p><p style="font-size:16px;">17816752712</p></td></tr>
    </table>

    <table id="myAccount" border="0" cellspacing="10px">
    <form id="myAccountForm">
        <tr><td rowspan="7" width="400px" valign="top"><p style="font-size:18px;color:blue;margin:10px;">请注意：一旦修改无法撤回</p></td><td height="60px" colspan="2">&nbsp;</td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">用户名：</p></td><td width="150px"><input id="username" name="username" type="text" value="<%=username%>"><span id="usernameSpan" style="display:none;color:red;">用户名长度必须为2-12位</span></td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">性别：</p></td><td width="150px"><input id="man" name="gender" type="radio" value="man"><label for="man">先生</label>&nbsp;&nbsp;<input id="female" name="gender" type="radio" value="female"><label for="female">女士</label></td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">爱好：</p></td><td width="150px"><input id="sports" name="hobbies" type="checkbox" value="sports"><label for="sports">运动</label>&nbsp;<input id="travel" name="hobbies" type="checkbox" value="travel"><label for="travel">旅游</label>&nbsp;<input id="sing" name="hobbies" type="checkbox" value="sing"><label for="sing">K歌</label></td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">手机号码：</p></td><td width="150px"><input id="tel" type="text" value="<%=tel%>"><span id="telSpan" style="color:red;display:none">手机号码必须为11位</span></td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">账户余额：</p></td><td width="150px"><input id="money" name="money" type="text" value="￥<%=money%>" readonly="readonly"></td></tr>
        <tr><td width="120px" height="50px" align="right"><p id="title">地址：</p></td><td width="150px"><input id="location" name="location" type="text" value="<%=location%>"><span id="locationSpan" style="color:red;display:none;">请输入正确的地址信息</span></td></tr>
        <tr><td></td><td width="100px" height="60px" align="right"><a id="updateAccount" onClick="updateAccount()">修改</a></td><td width="150px">&nbsp;&nbsp;<a id="cancelUpdate" onClick="cancelUpdate()">取消修改</a></td></tr>
   	</form>
    </table>
    <script>
	   		const username=document.getElementById("username");
	    	username.onblur=function checkUsername(){
	    		if(username.value.length>=2 && username.value.length<=12){document.getElementById("usernameSpan").style.display="none";document.getElementById("updateAccount").style.display="";}else{document.getElementById("usernameSpan").style.display="";document.getElementById("updateAccount").style.display="none";}
	    	}
	    	
	   		const gender="<%=gender.trim()%>";
	   		if(gender=="man"){document.getElementById("man").checked="true";}else if(gender=="female"){document.getElementById("female").checked="true";}
	   		
	   		const hobby1="<%=hobby1.trim()%>";const hobby2="<%=hobby2.trim()%>";const hobby3="<%=hobby3.trim()%>";
	   		if(hobby1!=""){document.getElementById(hobby1).checked="true";}if(hobby2!=""){document.getElementById(hobby2).checked="true";}if(hobby3!=""){document.getElementById(hobby3).checked="true";}
	   		
	   		const tel=document.getElementById("tel");
	    	tel.onblur=function checkTel(){
	    		if(tel.value.length==11){document.getElementById("telSpan").style.display="none";document.getElementById("updateAccount").style.display="";}else{document.getElementById("telSpan").style.display="";document.getElementById("updateAccount").style.display="none";}
	    	}
	  		
	    	const str=document.getElementById("location");
	  		str.onblur=function checkLocation(){
	  			if(str.value.length>1){document.getElementById("locationSpan").style.display="none";document.getElementById("updateAccount").style.display="";}else{document.getElementById("locationSpan").style.display="";document.getElementById("updateAccount").style.display="none";}
	  		}
	  		
   			function updateAccount(){
   				const form=document.getElementById("myAccountForm");
   				form.method="post";form.action="UpdateUserInfo";form.submit();
   			}
   			function cancelUpdate(){
   				document.location.reload();
   			}
   		</script>
   		
   		
    <table id="updateInfo" border="0" cellspacing="10px">
    <form id="updateInfoForm">
        <tr><td rowspan="7" width="350px">&nbsp;</td><td height="60px" colspan="2">&nbsp;</td></tr>
        <tr><td width="160px" height="50px" align="right"><p id="title">原密码：</p></td><td width="150px"><input type="text" id="password0" name="password0"><span id="password0WrongSpan" style="color:red;display:none">原密码输入错误</span><span id="password0EmptySpan" style="color:red;display:none">请输入原密码</span></td></tr>
        <tr><td width="160px" height="50px" align="right"><p id="title">新密码：</p></td><td width="150px"><input type="text" id="password1" name="password1"><span id="password1WrongSpan" style="color:red;display:none">密码必须大于6位</span></td></tr>
        <tr><td width="160px" height="50px" align="right"><p id="title">确认新密码：</p></td><td width="150px"><input type="text" id="password2" name="password2"><span id="password2Span" style="color:red;display:none">两次输入密码不一致</span></td></tr>
        <tr><td width="160px" height="60px" align="right"><a id="updatePassword" onClick="updatePassword()">修改</a></td><td width="150px">&nbsp;&nbsp;<input id="resetUpdatePassword" type="reset"></td></tr>
    </form>
    </table>
    <script>
    	const password0=document.getElementById("password0");
    	const password1=document.getElementById("password1");
    	const password2=document.getElementById("password2");
    	const form=document.getElementById("updateInfoForm");
    	
    	password0.onblur=checkPassword0;
    	function checkPassword0(){
    		const password="<%=password.trim()%>";
    		if(password0.value.length==0 || password0.value=="<%=password%>"){document.getElementById("password0WrongSpan").style.display="none";return true;}else{document.getElementById("password0WrongSpan").style.display="";return false;}
    	}
    	password1.onblur=checkPassword1;
   		function checkPassword1(){
   			function check1(){if(password1.value.length>=6 || password1.value.length==0){document.getElementById("password1WrongSpan").style.display="none";return true;}else{document.getElementById("password1WrongSpan").style.display="";return false;;}}
   			function check2(){if(password1.value.length>0){if(password0.value.length>0){document.getElementById("password0EmptySpan").style.display="none";return true;}else{document.getElementById("password0EmptySpan").style.display="";return false;}}else{document.getElementById("password0EmptySpan").style.display="none";return false;}}
   			return check1() && check2();
   		}
    	password2.onblur=checkPassword2;
  		function checkPassword2(){
    		if(password1.value==password2.value){document.getElementById("password2Span").style.display="none";return true;}else{document.getElementById("password2Span").style.display="";return false;}
    	}
    	
    	function updatePassword(){
    		if(checkPassword0() && checkPassword1() && checkPassword2()){form.method="post";form.action="UpdateUserInfo";form.submit();}else{alert("输入有误，请重新检查");}
    	}
    	
    </script>
    
    
    <%
    List<car> car=productsMapper.selectAllCarByUsername(username);
    int id=0;String name="";int price=0;int amount=0;String size="";String img="";
    %>
    <table id="car" border="0" cellspacing="10px">
    	<%if(!car.isEmpty()){
    		for(car s:car){id=s.getId();name=s.getName();price=s.getPrice();amount=s.getAmount();size=s.getSize();img=s.getImg();
    		out.println("<tr><td rowspan='5' width='200px'></td><td width='300px' height='300px' rowspan='4'><img width='300px' height='300px' src="+img+"></td><td width='300px'><font style='font-size:20px;'>"+name+"</font></td><td rowspan='4' width='100px'>"+"<a href=PurchaseServlet?orderId="+id+">结算</a><br><br><br><a href='CarServlet?carId="+id+"'>删除</a>"+"</td></tr><tr><td>￥ "+price+"</td></tr><tr><td>共 "+amount+"（件）</td></tr><tr><td> 尺码：<font style='font-size:24px;'>"+size+"</font></td></tr><tr><td height='30px' colspan='3'><hr></td></tr>");
    		}
    		}else{
    			out.println("<tr><td><p style='font-size:18px;color:blue;margin:10px;'>购物车为空</p></td></tr>");
    		}%>
		
    </table>
    
    
    <%
    List<order> order=productsMapper.selectAllOrder(username);
    String opentime="";String closetime="";String stage="";
    %>
    <table id="order" border="0" cellspacing="10px">
        <%if(!order.isEmpty()){
    		for(order s:order){id=s.getId();name=s.getName().trim();price=s.getPrice();amount=s.getAmount();size=s.getSize().trim();img=s.getImg().trim();opentime=s.getOpentime().trim();closetime=s.getClosetime().trim();stage=s.getStage().trim();
    		String str="";
    		if(stage.contentEquals("确认收货") || stage.contentEquals("退回")){str="订单关闭时间："+closetime;}
	    		if(stage.contentEquals("待发货")){
	    			out.println("<tr><td rowspan='6' width='200px'></td><td width='300px' height='300px' rowspan='6'><img width='300px' height='300px' src="+img+"></td><td width='300px'><font style='font-size:20px;'>"+name+"</font></td><td rowspan='6' width='200px'>"+"<a href='DeleteFromOrderServlet?orderId="+id+"'>撤回订单</a>"+"</td></tr><tr><td>￥ "+price+"</td></tr><tr><td>共 "+amount+"（件）</td></tr><tr><td> 尺码：<font style='font-size:24px;'>"+size+"</font></td></tr><tr><td> 订单状态：<font style='font-size:24px;'>"+stage+"</font></td></tr><tr><td> 订单开启时间："+opentime+"<br>"+str+"</td></tr><tr><td></td><td height='30px' colspan='3'><hr></td></tr>");
	    		}else if(stage.contentEquals("待收货")){
	    			out.println("<tr><td rowspan='6' width='200px'></td><td width='300px' height='300px' rowspan='6'><img width='300px' height='300px' src="+img+"></td><td width='300px'><font style='font-size:20px;'>"+name+"</font></td><td rowspan='6' width='200px'>"+"<a href=OrderConfirmServlet?orderId="+id+">确认收到</a><br><br><br><a onClick='notRecieve()'>未收到？申诉</a>"+"</td></tr><tr><td>￥ "+price+"</td></tr><tr><td>共 "+amount+"（件）</td></tr><tr><td> 尺码：<font style='font-size:24px;'>"+size+"</font></td></tr><tr><td> 订单状态：<font style='font-size:24px;'>"+stage+"</font></td></tr><tr><td> 订单开启时间："+opentime+"<br>"+str+"</td></tr><tr><td></td><td height='30px' colspan='3'><hr></td></tr>");
	    		}else if(stage.contentEquals("确认收货")){
	    			out.println("<tr><td rowspan='6' width='200px'></td><td width='300px' height='300px' rowspan='6'><img width='300px' height='300px' src="+img+"></td><td width='300px'><font style='font-size:20px;'>"+name+"</font></td><td rowspan='6' width='200px'>"+"</td></tr><tr><td>￥ "+price+"</td></tr><tr><td>共 "+amount+"（件）</td></tr><tr><td> 尺码：<font style='font-size:24px;'>"+size+"</font></td></tr><tr><td> 订单状态：<font style='font-size:24px;'>"+stage+"</font></td></tr><tr><td> 订单开启时间："+opentime+"<br>"+str+"</td></tr><tr><td></td><td height='30px' colspan='3'><hr></td></tr>");
	    		}else if(stage.contentEquals("退回")){
	    			out.println("<tr><td rowspan='6' width='200px'></td><td width='300px' height='300px' rowspan='6'><img width='300px' height='300px' src="+img+"></td><td width='300px'><font style='font-size:20px;'>"+name+"</font></td><td rowspan='6' width='200px'>"+"<a href='DeleteFromOrderServlet?orderId="+id+"'>删除</a>"+"</td></tr><tr><td>￥ "+price+"</td></tr><tr><td>共 "+amount+"（件）</td></tr><tr><td> 尺码：<font style='font-size:24px;'>"+size+"</font></td></tr><tr><td> 订单状态：<font style='font-size:24px;'>"+stage+"</font></td></tr><tr><td> 订单开启时间："+opentime+"<br>"+str+"</td></tr><tr><td></td><td height='30px' colspan='3'><hr></td></tr>");
	    		}
    		}
    		}else{
    			out.println("<tr><td><p style='font-size:18px;color:blue;margin:10px;'>暂时没有订单</p></td></tr>");
    		}%>
    </table>
    <script>
    	function notRecieve(){
    		alert("请电话联系：17816752712");
    	}
    </script>
    
    
    
    <table id="charge" border="0" cellspacing="10px">
    <form id="chargeForm">
     	<tr><td rowspan="4" width="350px">&nbsp;</td><td height="80px" colspan="2">&nbsp;</td></tr>
        <tr><td align="right" height="50px" ><p id="title">账户名：</p></td><td><input id="username" name="username" type="text" style="border:none;"  readonly="readonly" value="<%=username%>"></td></tr>
        <tr><td align="right" height="50px" ><p id="title">账户余额：</p></td><td>￥<input id="money" name="money" type="text" style="border:none;" readonly="readonly" value="<%=money%>"></td></tr>
        <tr><td align="right" height="50px" ><p id="title">充值金额：</p></td><td><input id="chargeMoney" name="chargeMoney" type="text"></td></tr>
        <tr><td></td><td></td><td height="50px" ><a id="submitMoney" onClick="charge()">充值</a></td></tr>
    </form>
    </table>
    <script>
    	const chargeMoney=document.getElementById("chargeMoney");
    	const chargeForm=document.getElementById("chargeForm");
    	function charge(){
    		if(chargeMoney.value>0){
    			chargeForm.method="post";chargeForm.action="ChargeServlet";chargeForm.submit();
    		}else{
    			alert("请输入一个大于零的数值");
    		}
    	}
    </script>
    
    <table id="deleteAccount" border="0">
    <form id="deleteAccountForm">
         <tr><td width="500px" valign="top"><p style="font-size:18px;color:blue;margin:10px;">请注意：注销后所有相关信息都将被清除且无法找回，账户资金会原路退回。</p><br><br><input name="username" type="text" value="<%=username%>" style="display:none;">
         &nbsp;&nbsp;<a id="deleteAccount" onClick="deleteAccount()" style="color:white;padding:15px;background-color: rgba(70, 154, 207,0.9);width:350px;font-size: 24px;border-radius:10px;">注销账户</a></td></tr>
    </form>
    </table>
    <script>
    	function deleteAccount(){
    		const deleteAccountForm=document.getElementById("deleteAccountForm");
    		deleteAccountForm.method="post";deleteAccountForm.action="DeleteAccountServlet";deleteAccountForm.submit();
    	}
    </script>

    <script>
        function showMyAccount(){
            hiddenAll("myAccount");
        }
        function showUpdateInfo(){
            hiddenAll("updateInfo")
        }
        function showCar(){
            hiddenAll("car");
        }
        function showOrder(){
            hiddenAll("order");
        }
        function showCharge(){
            hiddenAll("charge");
        }
        function showDeleteAccount(){
            hiddenAll("deleteAccount");
        }
        function hiddenAll(a){
            const myAccount=document.getElementById("myAccount");
            const updateInfo=document.getElementById("updateInfo");
            const car=document.getElementById("car");
            const order=document.getElementById("order");
            const charge=document.getElementById("charge");
            const deleteAccount=document.getElementById("deleteAccount");
            if(a=="myAccount"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255)';document.getElementById("updateInfoButton").style.background='rgb(0,0,0,0)';document.getElementById("carButton").style.background='rgb(0,0,0,0)';document.getElementById("orderButton").style.background='rgb(0,0,0,0)';document.getElementById("deleteAccountButton").style.background='rgb(0,0,0,0)';document.getElementById("chargeButton").style.background='rgb(0,0,0,0)';
                myAccount.style.display="block";
                updateInfo.style.display="none";car.style.display="none";order.style.display="none";charge.style.display="none";deleteAccount.style.display="none";
            }else if(a=="updateInfo"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255,0)';document.getElementById("updateInfoButton").style.background='rgb(215, 215, 255)';document.getElementById("carButton").style.background='rgb(0,0,0,0)';document.getElementById("orderButton").style.background='rgb(0,0,0,0)';document.getElementById("deleteAccountButton").style.background='rgb(0,0,0,0)';document.getElementById("chargeButton").style.background='rgb(0,0,0,0)';
                updateInfo.style.display="block";
                myAccount.style.display="none";car.style.display="none";order.style.display="none";charge.style.display="none";deleteAccount.style.display="none";
            }else if(a=="car"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255,0)';document.getElementById("updateInfoButton").style.background='rgb(215, 215, 255,0)';document.getElementById("carButton").style.background='rgb(215, 215, 255)';document.getElementById("orderButton").style.background='rgb(0,0,0,0)';document.getElementById("deleteAccountButton").style.background='rgb(0,0,0,0)';document.getElementById("chargeButton").style.background='rgb(0,0,0,0)';
                car.style.display="block";
                myAccount.style.display="none";order.style.display="none";charge.style.display="none";deleteAccount.style.display="none";updateInfo.style.display="none";
            }else if(a=="charge"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255,0)';document.getElementById("updateInfoButton").style.background='rgb(215, 215, 255,0)';document.getElementById("carButton").style.background='rgb(215, 215, 255,0)';document.getElementById("orderButton").style.background='rgb(215, 215, 255,0)';document.getElementById("deleteAccountButton").style.background='rgb(0,0,0,0)';document.getElementById("chargeButton").style.background='rgb(215, 215, 255)';
                charge.style.display="block";
                myAccount.style.display="none";order.style.display="none";updateInfo.style.display="none";car.style.display="none";deleteAccount.style.display="none";
            }else if(a=="order"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255,0)';document.getElementById("updateInfoButton").style.background='rgb(215, 215, 255,0)';document.getElementById("carButton").style.background='rgb(215, 215, 255,0)';document.getElementById("orderButton").style.background='rgb(215, 215, 255)';document.getElementById("deleteAccountButton").style.background='rgb(0,0,0,0)';document.getElementById("chargeButton").style.background='rgb(215, 215, 255,0)';
                order.style.display="block";
                myAccount.style.display="none";updateInfo.style.display="none";car.style.display="none";charge.style.display="none";deleteAccount.style.display="none";
            }else if(a=="deleteAccount"){
                document.getElementById("myAccountButton").style.background='rgb(215, 215, 255,0)';document.getElementById("updateInfoButton").style.background='rgb(215, 215, 255,0)';document.getElementById("carButton").style.background='rgb(215, 215, 255,0)';document.getElementById("orderButton").style.background='rgb(215, 215, 255,0)';document.getElementById("deleteAccountButton").style.background='rgb(215, 215, 255)';document.getElementById("chargeButton").style.background='rgb(215, 215, 255,0)';
                deleteAccount.style.display="block";
                myAccount.style.display="none";updateInfo.style.display="none";charge.style.display="none";car.style.display="none";order.style.display="none";
            }
        }


    </script>

</body>
</html>